import type { FC } from 'react';
import Link from 'next/link';
import style from './index.module.scss';
import Image from 'next/image';

interface IndexProps {
  type?: 'word';
}

let list = [
  {
    url: 'https://resume.cjasen.com/bj_1717226030173.webp?imageView2/2/w/800',
    alt: '简约线条个人简历模板',
    id: 21,
  },
  {
    url: 'https://resume.cjasen.com/bj_1717226046919.png?imageView2/2/w/800',
    alt: '分栏简历模板',
    id: 20,
  },
  {
    url: 'https://resume.cjasen.com/bj_1717226060310.png?imageView2/2/w/800',
    alt: '时尚精美简历模板',
    id: 18,
  },
  {
    url: 'https://resume.cjasen.com/bj_1717226087903.png?imageView2/2/w/800',
    alt: '简洁风简历模板',
    id: 10,
  },
  {
    url: 'https://resume.cjasen.com/bj_1717486000636.webp?imageView2/2/w/800',
    alt: '淡蓝色简约风简历模板',
    id: 37,
  },
  {
    url: 'https://resume.cjasen.com/bj_1717318460856.webp?imageView2/2/w/800',
    alt: '热门经典简历模板',
    id: 29,
  },
  {
    url: 'https://resume.cjasen.com/bj_1717305315219.webp?imageView2/2/w/800',
    alt: '简历表格',
    id: 26,
  },
  {
    url: 'https://resume.cjasen.com/bj_1717486766980.webp?imageView2/2/w/800',
    alt: '蓝色系简约求职简历模板',
    id: 39,
  },
];
let wordlist = [
  {
    url: 'https://resume.cjasen.com/word_tpl105.jpg?imageView2/2/w/800',
    alt: '产品销售经理个人简历模板',
    id: 142,
  },
  {
    url: 'https://resume.cjasen.com/word_tpl98.jpg?imageView2/2/w/800',
    alt: '城市主题简历模板',
    id: 135,
  },
  {
    url: 'https://resume.cjasen.com/word_tpl93_1648285321147.jpg?imageView2/2/w/800',
    alt: '创新风格专业Word简历模板',
    id: 132,
  },
  {
    url: 'https://resume.cjasen.com/word_tpl89_1648285156168.jpg?imageView2/2/w/800',
    alt: '新正式Word简历模板',
    id: 125,
  },
  {
    url: 'https://resume.cjasen.com/word_tpl74.jpg?imageView2/2/w/800',
    alt: '淡蓝色简约风简历模板',
    id: 109,
  },
  {
    url: 'https://resume.cjasen.com/word_tpl77.jpg?imageView2/2/w/800',
    alt: '英文简历',
    id: 112,
  },
  {
    url: 'https://resume.cjasen.com/word_tpl76.jpg?imageView2/2/w/800',
    alt: '中英文简历',
    id: 111,
  },
  {
    url: 'https://resume.cjasen.com/word_tpl66.jpg?imageView2/2/w/800',
    alt: '经典商务简历模板',
    id: 101,
  },
];
const Index: FC<IndexProps> = ({ type }) => {
  let data = type === 'word' ? wordlist : list;
  return (
    <div>
      <div className={style.homeTempWraper}>
        <h2 className={style.title}>
          {type === 'word' ? 'Word简历模板' : '在线简历模板'}
        </h2>
        <div className={style.des}>
          <span></span>
          {type === 'word'
            ? '精美word简历模板，助您求职成功'
            : '在线制作精美简历 , 高效安全便捷'}

          <span></span>
        </div>
        <div className={style.content}>
          {data.map((item) => {
            return (
              <Link
                key={item.url}
                href={
                  type === 'word'
                    ? '/word/' + item.id
                    : '/content?mid=' + item.id
                }
                className={style.item}
              >
                <div className={style.cover}>
                  <div className={style.button}>使用模板</div>
                </div>
                <div style={{ position: 'relative', height: '100%' }}>
                  <Image fill sizes="200px" src={item.url} alt={item.alt} />
                </div>
              </Link>
            );
          })}
        </div>
        <Link
          className={style.moreTemp}
          href={type === 'word' ? '/word' : '/muban/list'}
        >
          更多模板
        </Link>
      </div>
    </div>
  );
};

export default Index;
